<template>
    <div class="com" :class="isFoldMenuModule ? 'short' : 'width'">
        <div class="logo-block">
            <div class="iconfont icon-app_logo applogo"></div>
            <div class="app-name" v-show="eleShow">{{ APP_NAME }}</div>
        </div>
        <div class="menu-list scrollbarStyle">
            <div class="menu-item" v-for="(item, index) in routeMenu" :key="index" @click="toClild(item)">
                <div class="iconfont menu-icon" :class="menuIcon[String(item.name)]"></div>
                <div class="label" v-show="eleShow">{{ $t('routeMenu.' + String(item.name)) }}</div>
            </div>
        </div>
        <div class="hide-column" @click="isFoldMenuModule = !isFoldMenuModule">
            <div class="iconfont icon-zuojiantou left-icon" :class="isFoldMenuModule ? 'right' : 'left'"></div>
        </div>
    </div>
</template>
<script lang='ts'>
import { computed, defineComponent, watch, ref } from 'vue'
import { homeStore } from '@/store'
import { routeMenu, menuIcon } from '@/route/router'
import { RouteRecordRaw, useRouter } from 'vue-router'
export default defineComponent({
    name: "",
    setup() {
        const APP_NAME = computed(() => {
            return homeStore().APP_NAME
        })
        const router = useRouter()
        // 是否折叠菜单栏
        const isFoldMenuModule = computed({
            get() {
                return homeStore().isFoldMenuModule
            },
            set(val: boolean) {
                homeStore().isFoldMenuModule = val
            }
        })
        const eleShow = ref(true)
        watch(isFoldMenuModule, (val) => {
            if (val) {
                eleShow.value = false
            } else {
                setTimeout(() => {
                    eleShow.value = true
                }, 300)
            }
        })
        // 进入子组件
        const toClild = (routeItem: RouteRecordRaw) => {
            console.log(routeItem.name);
            
            router.push({
                name: routeItem.name
            })
        }
        return {
            toClild,
            menuIcon,
            routeMenu,
            eleShow,
            APP_NAME,
            isFoldMenuModule
        }
    },
})
</script>
<style lang="less" scoped>
.com {
    background: @menuColumBg;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: width 0.2s;

    &.short {
        width: 60px;
    }

    &.width {
        width: 180px;
    }

    .logo-block {
        display: flex;
        align-items: center;
        border-bottom: 1px solid @mainHoverBgColor;
        height: 70px;
        color: @mainFontColor;
        padding: 0 15px;

        .applogo {
            font-weight: bold;
            font-size: 30px;
        }

        .app-name {
            padding-top: 4px;
            font-size: 19px;
            margin-left: 12px;
        }
    }

    .menu-list {

        .menu-item {
            height: 50px;
            display: flex;
            align-items: center;
            padding: 0 18px;
            cursor: pointer;

            &:hover {
                color: @mainFontHoverColor;
            }

            .menu-icon {
                font-size: 24px;
            }

            .label {
                margin-left: 6px;
            }
        }
    }


    .hide-column {
        border-top: 1px solid @mainHoverBgColor;
        height: 42px;
        margin-top: auto;
        padding: 0 18px;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
            background: @mainHoverBgColor;
        }

        .left-icon {
            color: @mainFontColor;
            font-size: 25px;
            margin-left: auto;
            transition: all 0.3s;

            &.right {
                transform: rotate(180deg);
            }

            &.left {
                transform: unset;
            }
        }
    }
}
</style>
